<template>
  <div>

    <div class="layui-container">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md8 content detail">
          <div class="fly-panel detail-box">
            <h1>{{detail.title}}</h1>
            <div class="fly-detail-info">
              <span class="layui-badge layui-bg-red">精帖</span>
              <span class="fly-list-nums">
                <a v-text="detail.reply_count"><i class="iconfont" title="回答">&#xe60c;</i> </a>
                <i class="iconfont" title="人气">&#xe60b;</i> {{detail.view_count}}
              </span>
            </div>
            <div class="detail-about">
              <a class="fly-avatar">
                <img :src="detail.user_head_img">
              </a>
              <div class="fly-detail-user">
                <a href="" class="fly-link">
                  <cite v-text="detail.user_name"></cite>
<!--                  <i class="iconfont icon-renzheng"></i>
                  <i class="layui-badge fly-badge-vip">VIP3</i>-->
                </a>
                <span v-text="detail.created_at"></span>
              </div>
              <div class="detail-hits" id="LAY_jieAdmin" data-id="123">
                <span style="padding-right: 10px; color: #FF7200">邮箱：{{detail.user_email}}</span>
<!--                <span class="layui-btn layui-btn-xs jie-admin" type="edit"><a>编辑此贴</a></span>-->
              </div>
            </div>
            <div class="detail-body photos" v-html="detail.body">
            </div>
          </div>

          <div class="fly-panel detail-box" id="flyReply">
            <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
              <legend>回帖</legend>
            </fieldset>

            <ul class="jieda" id="jieda">

              <li data-id="111" class="jieda-daan"
                  v-for="list of reply"
                  :key="list.id"
              >
                <a name="item-1111111111"></a>
                <div class="detail-about detail-about-reply">
                  <a class="fly-avatar">
                    <img :src="list.user_head_img">
                  </a>
                  <div class="fly-detail-user">
                    <a href="" class="fly-link">
                      <cite v-text="list.user_name"></cite>
<!--                      <i class="iconfont icon-renzheng"></i>-->
<!--                      <i class="layui-badge fly-badge-vip">VIP3</i>-->
                    </a>

                    <span v-show="detail.user_id == list.user_id">(楼主)</span>

                  </div>

                  <div class="detail-hits">
                    <span v-text="list.created_at"></span>
                  </div>

                  <i v-show="list.is_adopt" class="iconfont icon-caina" title="最佳答案"></i>

                </div>
                <div class="detail-body jieda-body photos">
                  <cite class="fly-link" v-show="list.to_user_name">@{{list.to_user_name}}：</cite>
                  {{list.content}}
                </div>
                <div class="jieda-reply">
<!--              <span class="jieda-zan zanok" type="zan">
                <i class="iconfont icon-zan"></i>
                <em>66</em>
              </span>-->
              <span type="reply" @click="replyToUser(list.user_id, list.user_name)">
                <i class="iconfont icon-svgmoban53"></i>
                回复
              </span>
                  <div class="jieda-admin">
<!--                    <span type="edit">编辑</span>
                    <span type="del">删除</span>-->
                    <span v-show="!list.has_adopt && detail.user_id == user.id" class="jieda-accept" type="accept" @click="adoptReply(list.id)">采纳</span>
                  </div>
                </div>
              </li>

              <!-- 无数据时 -->
               <li v-show="reply.length == 0" class="fly-none">消灭零回复</li>
            </ul>

            <div class="layui-form layui-form-pane">
                <div class="layui-form-item layui-form-text">
                  <a name="comment"></a>
                  <div class="layui-input-block">
                    <textarea id="L_content" v-model="content" required lay-verify="required" placeholder="请输入内容"  class="layui-textarea fly-editor" style="height: 150px;"></textarea>
                  </div>
                </div>
                <div class="layui-form-item">
                  <input type="hidden" name="jid" value="123">
                  <button class="layui-btn" lay-filter="*" lay-submit
                    @click="submitContent"
                  >
                    提交回复
                  </button>
                </div>
            </div>
          </div>
        </div>
        <div class="layui-col-md4">

          <right-hot :hot="hot"></right-hot>

          <div class="fly-panel">
            <div class="fly-panel-title">
              这里可作为广告区域
            </div>
            <div class="fly-panel-main">
              <a class="fly-zanzhu" style="background-color: #5FB878;">这里可作为广告区域</a>
            </div>
          </div>

<!--          <div class="fly-panel" style="padding: 20px 0; text-align: center;">
            <img src="@/assets/res/images/weixin.jpg" style="max-width: 100%;" alt="layui">
            <p style="position: relative; color: #666;">微信扫码关注 layui 公众号</p>
          </div>-->

        </div>
      </div>

  </div>
  </div>

</template>

<script>
import {reply, adopt} from "@/api/detail";
import { message } from '@/element/message';
import { MessageBox } from 'element-ui';
import RightHot from "@/pages/common/RightHot";

export default {
  name: 'DetailContent',
  components: {
    RightHot
  },
  props: {
    detail: Object,
    reply: Array,
    hot: Array
  },
  data () {
    return {
      content: '',
      user: {}
    }
  },
  methods: {
    // 发表评论
    submitContent: function () {
      if (Object.keys(this.user).length == 0) {
        message('请先登录', 'warning')
        this.$router.push({
          path:'/login'
        })
        return
      }
      if (this.content == '') {
        message('请填写内容再提交', 'warning')
        return
      }

      reply(this.detail.id, this.user.id, 0, this.content).then(this.replySucc)
    },
    replySucc: function () {
      message('提交成功')
      this.reply.push({
        topic_id: this.detail.id,
        user_id: this.user.id,
        content: this.content,
        user_name: this.user.name,
        user_head_img: this.user.http_head_img,
        created_at: '刚刚'
      })
      // 清空内容
      this.content = ''
    },
    // 回复某个用户
    replyToUser: function (toUser, userName) {

      if (toUser == this.user.id) {
        message('不能自己回复自己', 'error')
        return
      }
      MessageBox.prompt('请输入回复内容', '@' + userName, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        reply(this.detail.id, this.user.id, toUser, value)
        message('提交成功')
        this.reply.push({
          topic_id: this.detail.id,
          user_id: this.user.id,
          content: this.content,
          user_name: this.user.name,
          head_img: this.user.http_head_img,
          created_at: '刚刚'
        })
      })
    },
    // 采纳评论
    adoptReply (id) {
      adopt(id).then(this.adoptReplySucc)
    },
    adoptReplySucc () {
      message('操作成功')
    }
  },
  mounted () {
    // localStorage.removeItem('user')
    if (localStorage.getItem('user')) {
      this.user = JSON.parse(localStorage.getItem('user'))
    }
  }
}
</script>

<style scoped>

</style>